<template>
	<view class="page">
        <view class="">
            <swiper :interval="3000" :duration="1000">
                <swiper-item v-for="(item,index) in goodsInfo.picPosition" :key='index' @click="preview(index)">
                    <view class="swiper-item " style="position: relative;">
                        <image style="width: 100%; height: 700rpx;" :src="item"></image>
                        <view class="posi" style="position: absolute; bottom: 20rpx; border-radius: 10rpx; right: 20rpx; width: 100rpx; height: 40rpx; background-color: #ccc; text-align: center; color: #fff;">
                            <text >{{index+1}} / {{goodsInfo.picPosition.length}}</text>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
            <view class="price" >
                
                ￥<text style="font-size: 50rpx;">{{goodsInfo.goodsPrice}}</text>
            </view>
            <view class="info flexRowC" >
                <text>{{goodsInfo.goodsName}}/{{goodsInfo.goodsClazz}}</text>
                <text>库存 : {{goodsInfo.goodsNum}}</text>
            </view>
        </view>
		<view class="detail">
            <view class="title">
                <text>图文详情</text>
            </view>
		    <view class=" imgs" v-for="(item,index) in goodsInfo.picPosition" :key='index' style="margin-bottom: 10rpx;">
		        <image style="width: 100%;" :src="item" mode="widthFix"></image>
		    </view>
		</view>
        <view class="gusslike" style="margin-bottom: 144rpx;">
            <view class="title">
                <text>猜你喜欢</text>
            </view>
            <goodsList :list='guessLikeList'></goodsList>
        </view>
        <view class="fixedfoot " >
        	<view class="flexRowC" style="justify-content: space-between; width: 100%; height: 100%;">
        		<view class="flexCloC" style="margin-left: 20rpx;" @click="backhome">
        			<image style="width: 36rpx; height: 36rpx; margin-bottom: 14rpx;" src="../../static/tabbar/mall.png"
        				mode=""></image>
        			<text>返回首页</text>
        		</view>
        		
                <view class="flexRowC">
                    <button type="default" class="savebtn" @click="addcar">加入购物车</button>
                    <button type="default" class="savebtn buybtn" @click="pay">立即购买</button>
                </view>
        		
        	</view>
        
        </view>
		
	</view>
</template>

<script>
    import goodsList from "../../component/goodsList.vue"
	export default {
        components:{
            goodsList
        },
		data() {
			return {
				goodsId:null,
                guessLikeList:[],
				goodsInfo: {

				}
			}
		},
		computed: {


		},
		onLoad(options) {
			this.goodsId = options.id*1
			this.getData()
            this.getLike()
		},

		methods: {
			enterDetail() {
				uni.navigateTo({
					url: '../enter/detail' + this.goodsInfo.title
				})
			},
            backhome(){
              uni.switchTab({
                  url:'../tabBar/index'
              })  
            },
			getData() {
				
				this.$http.get('/goods_msg/getById?id='+this.goodsId).then(res => {
					console.log(res)
					this.goodsInfo = res.entity
				})
			},
            getLike(){
                this.$http.get('/goods_msg/guessLike').then(res => {
                	console.log(res)
                	this.guessLikeList = res.list
                })
            },
            addcar(){
                if(this.goodsInfo.num<this.goodsInfo.goodsNum){
                	uni.showToast({
                		title:'加入成功',
                		
                	})
                	this.add(this.goodsInfo)
                }else{
                	uni.showToast({
                		title:'购买数量超出库存数量',
                		icon:'none'
                	})
                }
            },
			pay(){
				if(this.goodsInfo.num<this.goodsInfo.goodsNum){
					this.$http.post('/goods_and_order/buyOne?num=1&goodsCouponId=0&id='+this.goodsInfo.goodsId).then(res => {
						console.log(res)
						if(res.code==0){
					        uni.showToast({
					            title:'购买成功'
					            
					        })
					        setTimeout(function(){
					            uni.switchTab({
					                url:'../tabBar/index'
					            })  
					        },1000)
					    }
					})
					this.add(this.goodsInfo)
				}else{
					uni.showToast({
						title:'暂时没货了',
						icon:'none'
					})
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100%;
        height: 100%;
        
        swiper{
            width: 100%;
            height: 700rpx;
        }
        .price{
            width: 100%;
            height: 100rpx;
            background-image: linear-gradient(to bottom , #ff0000 , #ff7736);
            color: #fff;
            line-height: 100rpx;
            font-size: 40rpx;
            padding-left: 20rpx;
        }
        .info{
            width: 100%;
            height: 120rpx;
            font-size: 40rpx;
            justify-content: space-between;
            padding: 0 20rpx;
            border-bottom: 1rpx solid #ccc;
        }
        .title{
            width: 100%;
            height: 100rpx;
            font-size: 42rpx;
            font-weight: bold;
            line-height: 100rpx;
            padding: 0 20rpx;
        }
        .fixedfoot {
        	position: fixed;
        	bottom: 0;
        	left: 0;
        	background-color: #fff;
        	width: 750rpx;
        	height: 124rpx;
        	padding: 0 18rpx;
        	color: #999;
        	font-size: 24rpx;
        }
        
        .savebtn {
        	width: 240rpx;
        	height: 80rpx;
        	line-height: 80rpx;
        	color: #fff;
        	font-size: 30rpx;
        	margin: 0;
        
        	background-image: linear-gradient(to right, #EA6652, #F1874E);
        }
        .buybtn{
            background-image: linear-gradient(to right , #ff0000 , #ff7736);
        }
	}
</style>
